<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${type == 'add' ? '新增' : type == 'copy' ? '复制' : '修改'}加微号`,
			size: '500px',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form :model="form" :rules="rules" ref="form" label-position="top" :disabled="saving">
			<el-card shadow="never">
				<el-form-item label="所属事业部" prop="biz_id">
					<cl-select
						v-model="form.biz_id"
						style="width: 100%"
						@change="changeBiz"
						filterable
						placeholder="请选择所属事业部"
						:disabled="type == 'edit'"
					>
						<el-option
							v-for="(item, index) in business"
							:key="index"
							:label="item.biz_name"
							:value="item.biz_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="品牌" prop="bra_id">
					<cl-select
						v-model="form.bra_id"
						style="width: 100%"
						filterable
						placeholder="请选择品牌"
						@change="changeBra"
						:disabled="isWxkDisable"
					>
						<el-option
							v-for="item in bizRefData.brand"
							:key="item.bra_id"
							:label="item.bra_name"
							:value="item.bra_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="微信昵称" prop="content">
					<el-input v-model="form.content" placeholder="最好是主体名称-微信昵称" />
				</el-form-item>
				<el-form-item label="加微方式" prop="type">
					<cl-select
						v-model="form.type"
						filterable
						style="width: 100%"
						placeholder="请选择加微方式"
						:disabled="isWxkDisable"
					>
						<el-option
							v-for="(item, index) in addType"
							:key="index"
							:label="item.label"
							:value="item.value"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item :label="form.type == 5 ? '企业微信二维码' : '二维码'" :prop="form.type == 5 ? '' : 'wechat_image_url'" v-if="form.type == 4 || form.type == 5">
					<cl-upload
						multiple
						:limit="1"
						:limit-size="1"
						list-type="picture-card"
						ref="uploads"
						v-model="form.wechat_image_url"
					/>
				</el-form-item>
				<template v-if="form.type == 5">
					<!-- <el-form-item label="二维码" prop="wechat_image_url">
						<cl-upload
							multiple
							:limit="1"
							:limit-size="1"
							list-type="picture-card"
							ref="uploads"
							v-model="form.wechat_image_url"
						/>
					</el-form-item> -->
					<el-form-item label="企业微信手机号" prop="wxk_work_mobile">
						<!-- <cl-select
						v-model="form.wxk_staff_id"
						style="width: 100%"
						placeholder="请选择加企业微信员工"
						filterable
						:disabled="isWxkDisable"
					>
						<el-option
							v-for="item in wxStaffList"
							:key="item.user_id"
							:label="item.user_name"
							:value="item.user_id"
						/>
					</cl-select> -->
						<el-input
							placeholder="请填写手机号码"
							v-model.trim="form.wxk_work_mobile"
							maxlength="11"
						/>
					</el-form-item>
					<el-form-item label="企业微信主体" prop="corpid">
						<cl-select
							v-model="form.corpid"
							style="width: 100%"
							filterable
							placeholder="请选择企业微信主体"
							@change="changeCorp"
						>
							<el-option
								v-for="item in corpidList"
								:key="item.corpid"
								:label="item.wxk_name"
								:value="item.corpid"
							/>
						</cl-select>
					</el-form-item>
					<template>
						<el-form-item label="账号" prop="wxk_staff_id">
							<cl-select
							v-model="form.wxk_staff_id"
							style="width: 100%"
							filterable
							placeholder="请选择账号"
							@change=""
							>
							<el-option
							v-for="item in corpUserList"
							:key="item.userid"
							:label="item.user_name+'-'+item.user_alias"
							:value="item.userid"
							/>
							</cl-select>
						<el-button style="margin-top: 10px;" @click="getCorpUser">刷新账号</el-button>
						</el-form-item>
					</template>
					<!-- <template v-else>
						<el-form-item label="账号" prop="wxk_staff_id">
							<el-input v-model="form.wxk_staff_id" placeholder="请先选择主体再填写账号" />
						</el-form-item>
					</template> -->
				</template>
				<el-form-item label="类型" prop="role">
					<cl-select
						v-model="form.role"
						style="width: 100%"
						placeholder="请选择加微方式类型"
						filterable
					>
						<el-option label="售前" :value="1" />
						<el-option label="售中" :value="2" />
					</cl-select>
				</el-form-item>

				<el-form-item label="所属渠道" prop="channel_id">
					<cl-select
						v-model="form.channel_id"
						style="width: 100%"
						@change="changeChannel"
						filterable
						placeholder="请选择所属渠道"
					>
						<el-option
							v-for="(item, index) in sourceList"
							:key="index"
							:label="item.cname"
							:disabled="item.status != 1"
							:value="item.id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="所属推广人" prop="operator_user_id">
					<cl-select
						v-model="form.operator_user_id"
						filterable
						style="width: 100%"
						@change="changeOperator"
						placeholder="请选择所属推广人"
					>
						<el-option
							v-for="(item, index) in userList"
							:key="index"
							:label="item.user_name"
							:value="item.user_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="广告账户账号" prop="supplie_id">
					<cl-select
						v-model="form.supplie_id"
						filterable
						style="width: 100%"
						placeholder="请选择广告账户账号"
					>
						<el-option
							v-for="(item, index) in supplieList"
							:key="index"
							:label="item.supplie_id"
							:value="item.id"
						/>
					</cl-select>
				</el-form-item>
			</el-card>
		</el-form>
	</cl-drawer>
</template>
<script>
import { validate } from "@/utils/validate";

export default {
	data() {
		return {
			//加微方式类型
			addType: [
				{ label: "加微号-微信号", value: 1 },
				{ label: "加微号-QQ", value: 3 },
				{ label: "加微号-手机号", value: 2 },
				{ label: "加微码-二维码", value: 4 },
				{ label: "企微码-企业微信码", value: 5 }
			],
			saving: false,
			userList: [], //推广人数据
			sourceList: [], //渠道
			supplieList: [], //广告账户账号
			searchBrandList: [],
			corpidList: [],
			corpUserList: [],
			form: {
				id: undefined, //id
				biz_id: "", //事业部
				bra_id: "", //品牌
				content: "", //账号
				type: "",
				wxk_work_mobile: "", // 企业微信手机
				corpid: "",
				corp_pattern: 2,
				supplie_id: "", //广告账户id
				channel_id: "", //渠道id
				wxk_staff_id: "",
				wechat_image_url: "",
				role: "", //类型
				operator_user_id: "" //推广人id
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				content: [{ required: true, message: "请填写加微号" }],
				type: [{ required: true, message: "请选择添加类型" }],
				// wxk_work_mobile: [
				// 	{ required: true, message: "请输入手机号码" },
				// 	{ pattern: validate.mobile, message: "手机号码格式不正确" }
				// ],
				corpid: [{ required: true, message: "请选择企业微信账号配置" }],
				channel_id: [{ required: true, message: "请选择渠道" }],
				wxk_staff_id: [{ required: true, message: "请填写账号" }],
				// supplie_id: [{ required: true, message: "请选择广告账户账号" }],
				site: [{ required: true, message: "请填写返点" }],
				wechat_image_url: [{ required: true, message: "请选择图片" }],
				role: [{ required: true, message: "请选择类型" }],
				// wxk_staff_id: [{ required: true, message: "请选择企业微信员工" }],
				// operator_user_id: [{ required: true, message: "请选择推广人" }]
			},
			type: "add",
			// 企业微信员工列表
			wxStaffList: []
		};
	},
	computed: {
		isWxkDisable() {
			let editing = this.type == "edit";
			return editing && this.form.type == 5;
		},
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
			this.userType();
			this.getSourceList();
			this.getDistributorLists();
			// this.getWxStaff();
			this.getCorpidList();
		},
		open(type, data = {}) {
			this.$refs.drawer.create();
			this.type = type;
			const newData = data ? JSON.parse(JSON.stringify(data)) : {}
			if (type != "add") {
				this.form = { ...newData };
			}
			this.init();
		},
		close() {
			this.$refs.drawer.close();
		},
		//重置表单
		reset() {
			this.$refs.form.resetFields();
			this.$resetFields(this.form);
			this.form.biz_id = this.getCurrBiz();
			this.form.id = undefined;
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				let form = { ...this.form };
				const { biz_id } = form;
				if (form.type != 5) {
					form.wxk_staff_id = "";
				}
				await this.$service.config[
					["add", "copy"].includes(this.type) ? "wechatAdd" : "wechatEdit"
				](form).done(() => {
					this.saving = false;
				});
				this.close();
				let editing = this.type == "edit";
				this.$message.success(
					`${this.type == "add" ? "新增" : this.type == "copy" ? "复制" : "修改"}成功`
				);
				this.$emit("confirm", biz_id, !editing);
			});
		},
		// 切换事业部
		changeBiz() {
			this.form.bra_id = "";
			this.form.operator_user_id = "";
			this.form.channel_id = "";
			this.form.wxk_staff_id = ""
			this.form.supplie_id = "";
			this.init();
		},
		async getCorpidList() {
			const { biz_id } = this.form;
			this.corpidList = [];
			if (!biz_id) return;
			const res = await this.$service.workwechat.getCorpidList({ biz_id });
			this.corpidList = res;
		},

		//广告账户账号
		async changeChannel() {
			this.form.supplie_id = "";
			this.getDistributorLists();
		},
		async changeOperator() {
			this.form.supplie_id = "";
			this.getDistributorLists();
		},
		async getDistributorLists() {
			const { biz_id, channel_id, bra_id, operator_user_id } = this.form;
			this.supplieList = [];
			if (!operator_user_id || !channel_id) return;
			const list = await this.$service.config.distributorLists({
				biz_id,
				channel_id,
				bra_id,
				user_id: operator_user_id
			});
			this.supplieList = list;
		},
		// 推广人接口
		async userType() {
			const { biz_id } = this.form;
			this.userList = [];
			if (!biz_id) return;
			const res = await this.$service.user.deptuserlists({ biz_id, post: 4 });
			this.userList = res;
		},
		//渠道
		async getSourceList() {
			const { biz_id } = this.form;
			this.sourceList = [];
			if (!biz_id) return;
			const res = await this.$service.source.list({
				biz_id
			});
			this.sourceList = res;
		},
		// 切换品牌
		changeBra() {
			this.form.wxk_staff_id = "";
			this.getWxStaff();
		},
		// 获取企业微信员工
		async getWxStaff() {
			const { biz_id, bra_id, type } = this.form;
			if (!bra_id) {
				this.wxStaffList = [];
				return;
			}
			if (type != 5) return;
			let list = await this.$service.workwechat.userList({ biz_id, bra_id });
			this.wxStaffList = list.map(v => ({ user_id: v.user_id, user_name: v.name }));
		},
		changeCorp(corpid) {
			this.corpidList.map( v => {
				if (v.corpid == corpid) {
					this.form.corp_pattern = v.pattern

					this.getProxyUser(corpid)
				}
			})
		},
		async getProxyUser(corpid) {
			let res = await this.$service.config.getuserlist({corpid});
			this.corpUserList = res;
		},
		async getCorpUser() {
			const corpid = this.form.corpid
			await this.$service.config.userlist({corpid});
			this.$message.success(`刷新成功`);
			this.getProxyUser(corpid)
		}
	}
};
</script>
